<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>血液库存查询</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
    <script src="/js/echarts.js"></script>
</head>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .default-row {
        background: #f0f9eb;
    }
</style>
<body>
<div class="data-manage-table">
    <template>
        <el-form ref="form" :inline="true"  style="padding:20px 20px 0 20px;">
            <el-form-item label ="血液库存">
            </el-form-item>

            <el-form-item label="ABO">
                <el-select v-model="aboBloodType" placeholder="请选择ABO类型" clearable filterable @blur="selectBlur"
                           @clear = "selectClearState" @change="selectChangeState">
                    <el-option v-for="(item,index) in stateListAbo" :key="index" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="Rh">
                <el-select v-model="rhBloodType" placeholder="请选择RH类型" clearable filterable @blur="selectBlur"
                           @clear = "selectClearState" @change="selectChangeState">
                    <el-option v-for="(item,index) in stateListRh" :key="index" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="状态">
                <el-select v-model="bloodStocksCondition" placeholder="请选择血液状态" clearable filterable @blur="selectBlur"
                           @clear = "selectClearState" @change="selectChangeState">
                    <el-option v-for="(item,index) in stateList" :key="index" :label="item.state" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>

                <el-button type="primary" @click="select">筛选</el-button>
                <el-button type="primary" @click="load">刷新</el-button>
                <el-button type="primary" @click="dialogVisible = true">ID搜索</el-button>
                <el-button  @click="dialogVisible = true">导出</el-button>
                <el-button  type="primary" @click="analysis">库存分析</el-button>
                <el-switch size="medium"
                           style="position:fixed;top:35px;right:50px"
                           active-text="仅显示未过期库存"
                           inactive-text="显示全部"
                           font-size="50px"
                           v-model="switchOn"
                           active-color="#00A854"
                           active-value="1"
                           inactive-color="#F04134"
                           inactive-value="0"
                           @change="allSelect"
                           :disabled="disabled==-1?true:false"
                >
                </el-switch>


            </el-form-item>

        </el-form>
        <el-dialog title="ID搜索" center :visible.sync="dialogVisible" width="400px" @close="cancel">
            <!-- 内容的主体区域 -->
            <el-form  align="left" label-width="20px">
                <el-form-item label="ID" prop="bloodIdTo" >
                    <el-input v-model="bloodIdTo"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel()">取 消</el-button>
                    <el-button type="primary" @click="find">确 定</el-button>
                </span>
        </el-dialog>

        <el-table v-if="tableData":data="tableData"
                  style="width: 100%" border
                  :row-class-name="tableRowClassName"
                  :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                  @current-change="">
            <el-table-column type="selection" width="55" align="center"></el-table-column>

            <el-table-column prop="bloodId" label="血液id" min-width="10%" align="center">
            </el-table-column>

            <el-table-column prop="bloodVariety" label="血液种类" min-width="10%" align="center">
                <template slot-scope="scope">
                    {{getStateVarity(scope.row.bloodVariety)}}<!--调用getChangeType方法-->
                </template>
            </el-table-column>

            <el-table-column prop="unitVolume" label="血液数量" min-width="10%" align="center">

            </el-table-column>

            <el-table-column prop="rhBloodType" label="血液rh类型" min-width="10%" align="center">
                <template slot-scope="scope">
                    {{getStateRh(scope.row.rhBloodType)}}<!--调用getChangeType方法-->
                </template>
            </el-table-column>
            <el-table-column prop="aboBloodType" label="血液abo类型" min-width="10%" align="center">
                <template slot-scope="scope">
                    {{getStateAbo(scope.row.aboBloodType)}}<!--调用getChangeType方法-->
                </template>
            </el-table-column>
            <el-table-column prop="inboundTime" label="血液入库时间" min-width="15%" align="center">
            </el-table-column>
            <el-table-column prop="failureTime" label="血液失效时间" min-width="15%" align="center">
            </el-table-column>
            <el-table-column prop="position" label="血液存储位置" min-width="15%" align="center">
            </el-table-column>
            <el-table-column prop="state" label="血液存储状态" min-width="10%" align="center">
                <template slot-scope="scope">
                    {{getStateName(scope.row.state)}}<!--调用getChangeType方法-->
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                    class="pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pagination.currentPage"
                    :page-sizes="[1, 5, 10, 20]"
                    :page-size.sync="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    v-if="tableData":total="pagination.total"
                    style="text-align: center; margin-top: 20px;">
            </el-pagination>
        </div>
        <el-row :gutter="20">
            <el-col :span="12"><div id="main1" style="border:1px;width:80%;min-height:300px;height:auto;margin-top:5%;"></div></el-col>
            <el-col :span="12"><div id="main" style="border:1px ;width:80%;min-height:300px;height:auto;margin-top:5%;"></div></el-col>
        </el-row>
    </template>
</div>

<script src="/plugins/vue-2.6.11/vue.js"></script>
<script src="/plugins/element-2.4.5/index.js"></script>
<script src="/icons/iconfont.js"></script>
<script src="/js/axios.min.js"></script>
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script>
    (function () {
        var vm = window.vm = new Vue({
            el: '.data-manage-table',
            data() {
                return {
                    stateList:{},
                    pagination: {//分页相关模型数据
                        currentPage: 1,//当前页码
                        pageSize:5,//每页显示的记录数
                        total:0,//总记录数
                        //需要根据查询的条件
                    },
                    stateListAbo:{},
                    stateListRh:{},
                    stateListVarity:{},

                    conOptions: [{
                        value: '2',
                        label: '未过期'
                    }, {
                        value: '14',
                        label: '已过期'
                    }, {
                        value: '3',
                        label: '已出库'
                    }],
                    switchOn:'',
                    disabled: "1",
                    rhBloodType: "101",
                    aboBloodType: "001",
                    bloodStocksCondition: "2",
                    bloodId:"",
                    bloodIdTo:" ",

                    //弹出框显示
                    dialogVisible: false,
                    tableData: [
                        {
                            bloodId: "",
                            bloodVariety: "",
                            unitVolume: "",
                            rhBloodType: "",
                            aboBloodType: "",
                            failureTime:"",
                            position: "",
                            inboundTime: "",
                            state: ""
                        }

                    ],
                    analysisData:[
                        {
                            blood_variety:"",
                            totalHp: "",
                            rh_blood_type:"",
                            abo_blood_type:""
                        }
                    ]

                    //新增样本表单验证
                }
            },
            created(){
                this.getAboState()
                this.getRhState()
                this.getVarityState()
            },
            mounted() {
                this.load()
            },
            methods: {
                //每页条数改变时触发 选择一页显示多少行
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.pagination.currentPage= 1;

                    this.pagination.pageSize = val;
                    if(this.switchOn=="0"){
                        this.load();
                    }
                    else this.allSelect();

                },
                //当前页改变时触发 跳转其他页
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.pagination.currentPage = val;
                    if(this.switchOn=="0"){
                        this.load();
                    }
                    else this.allSelect();
                },

                //数据字典
                getState(){
                    fetch(`/state/normal/getName`).then(res => res.json()).then(res => {
                        if (res.code === "200"){
                            this.stateList = res.data
                        } else {
                            this.$notify.error({
                                title : '错误',
                                message : '获取数据失败'
                            })
                        }
                    })
                },
                getAboState(){
                    fetch(`/aboType/normal/getName`).then(res => res.json()).then(res => {
                        console.log("1"+res.code)
                        if (res.code == 200){
                            this.stateListAbo = res.data
                        } else {
                            this.$notify.error({
                                title : '错误',
                                message : '获取数据失败'
                            })
                        }
                    })
                },
                getRhState(){
                    fetch(`/rhType/normal/getName`).then(res => res.json()).then(res => {
                        console.log("1"+res.code)
                        if (res.code == 200){
                            this.stateListRh = res.data
                        } else {
                            this.$notify.error({
                                title : '错误',
                                message : '获取数据失败'
                            })
                        }
                    })
                },
                getVarityState(){
                    fetch(`/bloodComposition/normal/getName`).then(res => res.json()).then(res => {
                        console.log("1"+res.code)
                        if (res.code == 200){
                            this.stateListVarity = res.data
                        } else {
                            this.$notify.error({
                                title : '错误',
                                message : '获取数据失败'
                            })
                        }
                    })
                },

                // 将表格中的State字段的code转换成name
                getStateName(code){
                    for (var i=0;i<this.stateList.length;i++){

                        if (this.stateList[i].code == code){
                            return this.stateList[i].state
                        }
                    }
                },
                getStateAbo(code){
                    for (var i=0;i<this.stateListAbo.length;i++){
                        if (this.stateListAbo[i].code == code){
                            return this.stateListAbo[i].name
                        }
                    }
                },
                getStateRh(code){
                    for (var i=0;i<this.stateListRh.length;i++){
                        if (this.stateListRh[i].code == code){
                            return this.stateListRh[i].name
                        }
                    }
                },
                getStateVarity(code){
                    for (var i=0;i<this.stateListVarity.length;i++){
                        if (this.stateListVarity[i].code == code){
                            return this.stateListVarity[i].composition
                        }
                    }
                },

                //强制更新
                selectBlur(e){
                    if (e.target.value !== ''){
                        this.$forceUpdate() //强制更新
                    }
                },
                // 清空状态
                selectClearState(){
                    this.$forceUpdate();
                },
                // 输入状态
                selectChangeState(val){
                    this.$forceUpdate();
                },

                load() {
                    //组织参数，拼接url请求地址
                    // param = "?email="+this.pagination.email;
                    // param +="&username="+this.pagination.username;
                    // param +="&phoneNum="+this.pagination.phoneNum;
                    this.tableData=undefined
                    this.disabled = 1;
                    this.getState()
                    axios.get("/bloodStocks/normal/getBloodInfoAll/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res)=>{
                        this.pagination.pageSize = res.data.data.size;
                        this.pagination.currentPage = res.data.data.current;
                        this.pagination.total = res.data.data.total;

                        this.tableData = res.data.data.records;
                    });
                },

                tableRowClassName(row) {
                    if (row.row.state == "3") {
                        return 'warning-row';
                    } else if (row.row.state == "26") {
                        return 'default-row ';
                    }
                    return '';
                },
                allSelect() {
                    //组织参数，拼接url请求地址
                    param = "?bloodCon="+this.switchOn;
                    // param +="&phoneNum="+this.pagination.phoneNum;
                    axios.get("/bloodStocks/normal/getBloodUseful/"+this.pagination.currentPage+"/"+this.pagination.pageSize+param).then((res)=>{
                        this.pagination.pageSize = res.data.data.size;
                        this.pagination.currentPage = res.data.data.current;
                        this.pagination.total = res.data.data.total;
                        this.tableData = res.data.data.records;

                    });},
                select() {
                    this.disabled = -1;
                    fetch(`/bloodStocks/normal/getBloodAboRh?abo=${this.aboBloodType}&rh=${this.rhBloodType}&except=${this.bloodStocksCondition}`).then(res => res.json()).then(res => {
                        this.tableData = res.data
                    })
                },
                myEcharts(mycars,mycarstow){
                    //实例化
                    const mychart1 = echarts.init(document.getElementById('main1'));
                    const option = {
                        title:{
                            text:"在库各类血液情况",
                            left:'center'
                        },
                        legend: {
                            data: ['各种血液库存情况']
                        },
                        xAxis: {
                            type: 'category',
                            data: mycars,
                            axisLabel: {
                                borderWidth: 1,
                                clickable: true
                            },
                            silent: false,
                            triggerEvent: true
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '血液库存情况',
                                type: 'bar',
                                data: mycarstow
                            }
                        ]
                    };
                    mychart1.setOption(option);
                    mychart1.on('click', (params)=> {
                        if(params.componentType == "xAxis"){
                            this.pieChart(params.value);
                        }
                    });
                },
                pieChart(valuement){
                    const myChart = echarts.init(document.getElementById('main'));
                    let arr = Array.from(this.analysisData)
                    console.log(arr)
                    const abo = new Array();//string型数组
                    const rh = new Array();//int型数组
                    const name = new Array();
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i].blood_variety == valuement) {
                            abo.push({value:arr[i].totalHp,name:arr[i].abo_blood_type});
                            rh.push({value:arr[i].totalHp,name:arr[i].rh_blood_type});
                            name.push(arr[i].rh_blood_type,arr[i].abo_blood_type);
                        }
                    }

                    option = {
                        title:{
                            text:"血液类别明细",
                            left:'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            top: '12%',
                            data:name
                        },
                        series: [
                            {
                                name: 'RH',
                                type: 'pie',
                                selectedMode: 'single',
                                radius: [0, '30%'],
                                label: {
                                    position: 'inner',
                                    fontSize: 14
                                },
                                labelLine: {
                                    show: false
                                },
                                data: rh
                            },
                            {
                                name: 'ABO',
                                type: 'pie',
                                radius: ['45%', '60%'],
                                labelLine: {
                                    length: 30
                                },
                                label: {
                                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                    backgroundColor: '#F6F8FC',
                                    borderColor: '#8C8D8E',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: '#6E7079',
                                            lineHeight: 22,
                                            align: 'center'
                                        },
                                        hr: {
                                            borderColor: '#8C8D8E',
                                            width: '100%',
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: '#4C5058',
                                            fontSize: 14,
                                            fontWeight: 'bold',
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#fff',
                                            backgroundColor: '#4C5058',
                                            padding: [3, 4],
                                            borderRadius: 4
                                        }
                                    }
                                },
                                data: abo
                            }
                        ]
                    };
                    myChart.setOption(option);
                },
                draw(){
                    let arr = Array.from(this.analysisData).slice()
                    console.log(arr)
                    for (let i = 0; i < arr.length; i++) {
                        console.log(111111)
                        arr[i].blood_variety = this.getStateVarity(arr[i].blood_variety);
                        arr[i].rh_blood_type = this.getStateRh(arr[i].rh_blood_type);
                        arr[i].abo_blood_type = this.getStateAbo(arr[i].abo_blood_type);
                    }
                    console.log(this.analysisData)
                    let item = {};
                    for (let i = 0; i < arr.length; i++) {
                        item[arr[i].blood_variety] = ~~item[arr[i].blood_variety] + arr[i].totalHp;

                    }

                    var mycars=new Array();//string型数组
                    var mycarstow=new Array();//int型数组
                    //先加载后台数据 对获取的数据进行分组 且写入对应位置的数组中
                    Object.keys(item).forEach(function (key) {
                        mycars.push(key);
                        mycarstow.push(item[key]);
                    })
                    this.myEcharts(mycars,mycarstow);
                    console.log(mycars);
                    console.log(mycarstow);

                },
                analysis(){
                    fetch(`/bloodStocks/normal/getVarityNumber`).then(res => res.json()).then(res => {
                        this.analysisData = res.data
                        //此是this的指向已经转变为method而非实例所以采用bind绑定this
                        this.$options.methods.draw.bind(this)();
                    })

                },
                find(){
                    fetch(`/bloodStocks/normal/getBloodInfoAlone?bloodId=${this.bloodIdTo}`).then(res => res.json()).then(res => {
                        this.tableData = res.data
                        console.log(res.data)
                        this.dialogVisible = false

                    })
                },
                cancel(){
                    this.bloodIdTo = '',
                        this.dialogVisible = false
                }
            }

        });
    })()
</script>

</body>

</html>